<template>
  <div>
    <van-cell-group>
      <img :src="listinfo.pic" alt="" />
      <div>{{ listinfo.minPrice }}</div>
      <p>{{ listinfo.originalPrice }}</p>
      {{ listinfo.name }}
    </van-cell-group>
    <div v-html="content" class="con"></div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        text="加入购物车"
        @click="add"
      />
      <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { detail } from "@/api/login";

export default {
  name: "WorkspaceJsonXiangqing",

  data() {
    return {
      listinfo: {},
      content: "",
    };
  },

  mounted() {
    this.show();
  },

  methods: {
    add() {
      var obj = {
        id: this.listinfo.id,
        name: this.listinfo.name,
        pic: this.listinfo.pic,
        price: this.listinfo.minPrice,
        check: true,
      };
      this.$store.commit("Save", obj);
    },
    async show() {
      let res = await detail({ params: { id: this.$route.query.id } });
      //   console.log(res);
      this.listinfo = res.data.basicInfo;
      this.content = res.data.content;
    },
  },
};
</script>

<style lang="less" scoped>
.van-cell-group {
  p {
    text-decoration: line-through;
  }
  img {
    width: 100%;
    height: 200px;
  }
}
.con /deep/ img {
  width: 100%;
  height: 200px;
}
</style>